<template>
	<u-popup :show="show" mode="bottom" type="dialog" :closeable="true" @close="onClose">
		<view class="cancel-order-popup">
			<!-- 退款金额 -->
			<view class="refund-amount">
				<text class="label">退款金额</text>
				<text class="value">¥ {{ refundAmount }}</text>
			</view>

			<!-- 取消原因选择 -->
			<view class="reason-list">
				<view class="reason-list-title">
					请选择取消订单原因：<span class="reason-list-title-right">*</span>
				</view>
				<view class="reason-item" v-for="(reason, index) in cancelReasons" :key="index"
					@click="selectReason(index)">
					<text class="reason-text">{{ reason }}</text>
					<radio :checked="selectedReason === index" color="#FF452D" />
				</view>
			</view>

			<!-- 温馨提示 -->
			<view class="tips-box">
				<view class="tips-box-header">
					<view class="tips-icon">⚠️</view>
					<view class="">
						温馨提示：
					</view>
				</view>
				<text class="tips-text">
					1. 限时特价等优惠活动将会一并取消；<br />
					2. 本单抵扣使用的蜂蜜币将会原路返回至个人账户；<br />
					3. 订单一旦取消无法恢复，重新预约日期可能会被约满。
				</text>
			</view>

			<!-- 提交按钮 -->
			<button class="submit-btn" @click="submitCancel">提交</button>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name: 'CancelOrderPopup',
		props: {
			show: {
				type: Boolean,
				default: false
			},
			refundAmount: {
				type: [Number, String],
				default: 0
			}
		},
		data() {
			return {
				cancelReasons: [
					'出行计划有变/临时有事',
					'目的地调整，放弃原行程',
					'产品额外费用过高（如服务费、附加费）',
					'行程安排不满足，过于紧张 / 宽松',
					'重复预订，需取消冗余订单',
					'已与向导双方协商一致',
					'个人原因',
					'其他'
				],
				selectedReason: -1 // 默认未选择
			}
		},
		methods: {
			selectReason(index) {
				this.selectedReason = index;
			},
			
			submitCancel() {
				if (this.selectedReason === -1) {
					uni.showToast({
						title: '请选择取消原因',
						icon: 'none'
					});
					return;
				}
				
				// 向父组件传递取消信息
				this.$emit('submit', {
					reason: this.cancelReasons[this.selectedReason],
					reasonIndex: this.selectedReason
				});
			},
			
			onClose() {
				this.$emit('update:show', false);
				this.$emit('close');
			},
			
			// 重置选择状态
			reset() {
				this.selectedReason = -1;
			}
		},
		
		watch: {
			show(newVal) {
				if (newVal) {
					this.reset();
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cancel-order-popup {
		padding: 40rpx;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;

		.refund-amount {
			display: flex;
			justify-content: center;
			font-size: 36rpx;
			color: #333;
			margin-bottom: 40rpx;

			.label {
				color: #000000;
				font-weight: bold;
				margin-right: 10rpx;
			}

			.value {
				color: #FE7131;
				font-weight: bold;
			}
		}

		.reason-list {
			.reason-list-title {
				color: #000000;
				font-weight: bold;
				font-size: 30rpx;
				padding-bottom: 20rpx;

				.reason-list-title-right {
					color: red;
				}
			}

			.reason-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0;

				.reason-text {
					font-size: 26rpx;
					color: #333;
				}

				&:last-child {
					border-bottom: none;
				}
			}
		}

		.tips-box {
			margin: 30rpx 0;
			padding: 20rpx;
			background-color: #fff;
			border: 1px solid #f0f0f0;
			border-radius: 16rpx;
			font-size: 24rpx;
			color: #666;
			line-height: 40rpx;

			.tips-box-header {
				display: flex;
				align-items: center;
				text-align: center;
			}

			.tips-icon {
				margin-right: 10rpx;
				color: #FF452D;
			}
		}

		.submit-btn {
			width: 100%;
			height: 80rpx;
			background-color: #FE7131;
			color: white;
			font-size: 30rpx;
			border-radius: 40rpx;
			line-height: 80rpx;
			text-align: center;
		}
	}
</style>